<template>
	<!-- 通知公告 -->
	<div >
		<div class="banner_n">	</div>
		
		<div class="R_quanyemian">
		        <div>
		            
		           
		            <div class="R_tongzhiyemian">
		                <div>
		                    <div class="R_hou"></div>
		                    <div class="R_qian">
		                        <div class="R_lunbo">
		                            <div id="max" style="width: 100%;height: 100%;">
		                                <div class="re">
		                                     <el-carousel indicator-position="outside" style="width: 100%;height: 100%;">
		                                        <el-carousel-item v-for="item in noticeListp" :key="item.id" style="width: 100%;height: 100%;">
		                                          <div>
		                                          	<img :src="item.fggtp"  >
													
													<div class="carouse_bottom">
														<img src="/img/7-0-6.png" style="margin-bottom: 10px;" />
														<el-row type="flex" justify="space-between">
															<el-col :span="20">
																<router-link :to="'/notice/details?id='+item.id">{{item.title}}</router-link>
																
															</el-col>
															<el-col :span="5">
																<span>{{item.createTime}}</span>
															</el-col>
														</el-row>
														<p>{{item.absrtact}}</p>
													</div>
		                                          </div>
		                                        </el-carousel-item>
		                                      </el-carousel>
											
		                                </div>
		                            </div>
		                        </div>
		                        <div class="R_xiangqing">
		                            <div class="R_bianxian">
		                                <span class="R_biaoti">
		                                    <h3>最新公告</h3>
		                                </span>
		                                <a href="#" class="R_chaolianjie">查看更多></a>
		                                <ul class="R_gonggaoneirong">
		                                    <li v-for="item in noticeList" :key="item.id">
		                                        <div class="R_cuti">
		                                         
													<router-link :to="'/notice/details?id='+item.id">{{item.title}}</router-link>
		                                        </div>
		                                        <div class="R_xiaozi">
		                                            <span>{{item.absrtact}}</span>
		                                        </div>
		                                        <div class="R_shijain">
		                                            <span>{{item.createTime}}</span>
		                                        </div>
		                                    </li>
		                                   	
								</ul>
		                            </div>
		                        </div>
		                    </div>
		                </div>
		
		            </div>
		
		        </div>
		    </div>
			 <div></div>

	</div>
	
</template>

<script>
	
	export default {
		data(){
			return{
				noticeList:[],  //最新公告
				noticeListp:[]  //重要公告
			}
		},
	   created() {
	   	this.queryNewNotice();
		this.queryprimaryNotice();
	   },
		methods:{
			//查询最新公告
			queryNewNotice(){
				let that=this
				this.$http.get("/announcement/query?isNew=true").then(res=>{
					that.noticeList=res.data.list
					
				})
				
			},
			//重要公告查询
			queryprimaryNotice(){
				let that=this
				this.$http.get("/announcement/query?isEmphasis=1").then(res=>{
					that.noticeListp=res.data.list
					
				})

			}
		}
		
		
		
	}
	
</script>

<style scoped>
	.re>>>.el-carousel__indicators--outside{
		position: absolute;
		bottom: 0;
	}
	
	.carouse_bottom{
		position: absolute;
		color: #fff;
		bottom: 0px;
		width: 100%;
		background-color: #000000a6; 
		border-radius: 15px 15px 0 0;
		padding: 10px 30px;
	}
	
	.re>>>.el-carousel__container{
		height: 730px !important;
	}
	
	.banner_n{
		background: url(../../public/img/7-0-1.png) no-repeat;
		height: 300px;
		width: 100%;
		background-size: 100% 100%;
	}
	
	 ul {
	            list-style: none;
	
	        }
	
	        a:hover {
	            color: #3066E3 !important;
	            text-decoration: underline !important;
	        }
	
	        .R_daohanlan {
	            width: 1900px;
	            height: 120px;
	            background-color: skyblue;
	        }
	
	        .R_quanyemian {
	            width: 1900px;
	            background-color: rgba(224, 141, 141, 0.582);
	        }
	
	        .R_tongzhitupian {
	            width: 1900px;
	            height: 300px;
	            background-color: rgb(50, 192, 180);
	            display: flex;
	        }
	
	        /* .R_tongzhizi {
	            position: absolute;
	        } */
	
	        .R_tiaozhu {
	            width: 8px;
	            height: 40px;
	            /* background-color: blue; */
	            margin: 0 auto;
	            /*水平居中*/
	            position: relative;
	            top: 50%;
	            /*偏移*/
	            left: 10%;
	            transform: translateY(-50%);
	
	        }
	
	        .R_tongzhiziZ {
	            font-size: 40px;
	            margin: 0 auto;
	            /*水平居中*/
	            position: relative;
	            top: 25%;
	            /*偏移*/
	            left: 70%;
	            transform: translateY(-50%);
	        }
	
	        .R_tongzhiziE {
	            font-size: 12px;
	            margin: 0 auto;
	            /*水平居中*/
	            position: relative;
	            top: 25%;
	            /*偏移*/
	            left: 75%;
	            transform: translateY(-50%);
	        }
	
	        .R_tongzhiyemian {
	            width: 100%;
	            height: 900px;
	            position: relative;
	            background-color: #E5EBFF;
				overflow: hidden;
	
	        }
	
	        .R_hou {
	            width: 70%;
	            height: 730px;
	           background-image:linear-gradient(225deg, #2525D1, #49B4FE);
	            border-radius: 25px;
	            position: absolute;
	            top: 7%;
	            left: 8%;
	            z-index: 1;
	            display: flex;
	        }
	
	        .R_qian {
	            width: 70%;
	            height: 730px;
	            /* background-color: blue; */
	            border-radius: 25px;
	            margin: 0 auto;
	            position: absolute;
	            top: 13%;
	            left: 5%;
	            z-index: 2;
	            display: flex;
	        }
	
	        .R_lunbo {
	            width: 960px;
	            height: 730px;
				background-color: #fff;
	            border-radius: 25px 0px 0px 25px;
	            display: flex;
	        }
	
	        .R_bianju {
	            padding: 40px 60px 0px 60px;
	        }
	
	        .R_lunboneirong {
	            /* float: left; */
	            width: 70px;
	            height: 30px;
	            color: #fff;
	            background-color: #3066E3;
	        }
	
	        .R_cuti1 {
	            /* float: left; */
	            margin-top: 20px;
	        }
	
	        .R_cuti1 a {
	            width: 100%;
	            font-size: 20px;
	            color: #fff;
	            text-decoration: none;
	        }
	
	        .R_xiaozi1>a {
	            color: #757575;
	            /* font-size: 10px; */
	            text-decoration: none;
	            display: block;
	            padding-top: 10px;
	        }
	
	        .R_shijain1 {
	            float: right;
	            color: #757575;
	            /* width: 85px; */
	            font-size: 13px;
	            margin-top: -90px;
	        }
	
	        .R_xiangqing {
	            width: 510px;
	            height: 730px;
	            background-color: #fff;
	            /* background-color: skyblue; */
	            border-radius: 0px 25px 25px 0px;
	            float: right;
	            /* position: relative; */
	            /* display: flex; */
	        }
	
	        .R_bianxian {
	            padding: 40px 25px 0px 30px;
	        }
	
	        .R_biaoti {
	            float: left;
	        }
	
	        .R_chaolianjie {
	            float: right;
	            color: #757575;
	            font-size: 10px;
	            padding-top: 7px;
	        }
	
	        .R_gonggaoneirong {
	            /* float: left; */
	            padding-top: 40px;
	        }
	
	        .R_gonggaoneirong li:not(:first-child) {
	            margin-top: 40px;
	        }
	
	        .R_cuti {
	            width: 100%;
	            max-width: 340px;
	            overflow: hidden;
	            text-overflow: ellipsis;
	            white-space: nowrap;
	        }
	
	        .R_cuti>a {
	            color: black;
	            text-decoration: none;
	            /* display: block; */
	        }
	
	        .R_xiaozi {
	            width: 100%;
	            max-width: 340px;
	            overflow: hidden;
	            text-overflow: ellipsis;
	            /* white-space: nowrap; */
	
	        }
	
	        .R_xiaozi>a {
	            color: #757575;
	            font-size: 10px;
	            text-decoration: none;
	            display: block;
	            padding-top: 10px;
	        }
	
	        .R_shijain {
	            float: right;
	            color: #757575;
	            /* width: 85px; */
	            font-size: 8px;
	        }
	
	
</style>
